<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">
  var map;
  var directionsRenderer;
  var directionsService;
  var modos = 	[google.maps.DirectionsTravelMode.DRIVING,
	             google.maps.DirectionsTravelMode.BICYCLING,
	             google.maps.DirectionsTravelMode.WALKING];
  
  function initialize() {
    var latlng = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  function openPopUp(){
	  window.open('http://localhost:8080/sig/services/rotaPopUp.html', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=500, HEIGHT=400');
  }
  
  function calcRota(start,end,modo){
	  if(!directionsService) directionsService = new google.maps.DirectionsService();
	  if(!directionsRenderer) directionsRenderer = new google.maps.DirectionsRenderer({map: map});
	  var request = {
			    origin: start, 
			    destination: end,
			    travelMode: modos[modo],
			    unitSystem: google.maps.DirectionsUnitSystem.METRIC
			  };
	  
	  directionsService.route(request, function(result, status) {
		    if (status == google.maps.DirectionsStatus.OK) {
		      directionsRenderer.setDirections(result);
		    }
	  });
  }
  
</script>
</head>
<body onload="initialize()">
  <table style="width:100%; height:100%" border="1">
  	<tr>
  		<td style="width:30%; height:100%">
  			<div id="map_control" style="width:100%; height:100%">
  				<table style="width:30%; height:20%">
  					<tr>
  						<td>
  							<input type="button" value="CalcularRota" onclick="openPopUp()" />
  						</td>
  					</tr>
  				</table>
  			</div>
  		</td>
  		<td id="map_column" style="width:70%; height:100%">
  			<div id="map_canvas" style="width:900; height:700"></div>
  		</td>
  	</tr>
  </table>
</body>
</html>